<% include("/common/top.html"){} %>
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Tables</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/">Home</a></li>
                            <li class="breadcrumb-item active">表管理</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title"><button type="button" class="btn btn-block bg-gradient-success" onclick="rowAdd()">新增</button></h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <table id="example2" class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th>表名</th>
                                        <th>列簇</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="dataList"></tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>

                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <% include("/common/footer.html"){} %>

</div>
<!-- ./wrapper -->
<script id="addDialog" type="text/template">
    <div class="card">
        <div class="card-header">
            <strong>添加表</strong>
        </div>
        <div class="card-body card-block">
            <form action="" method="post" class="form-horizontal" id="dataFrom">
                <div class="row form-group">
                    <div class="col col-md-3"><label for="table_name" class=" form-control-label">表名</label></div>
                    <div class="col-12 col-md-9"><input type="text" id="table_name" name="table_name" placeholder="输入名称..." class="form-control"><span class="help-block"></span></div>
                </div>
                <div class="row form-group">
                    <div class="col col-md-3"><label for="families" class=" form-control-label">列簇</label></div>
                    <div class="col-12 col-md-9"><input type="text" id="families" name="families" placeholder="输入列簇,多个用 逗号 隔开.." class="form-control"><span class="help-block"></span></div>
                </div>

            </form>
        </div>
        <div class="card-footer">
            <button type="submit" onclick="rowSub()" class="btn btn-primary btn-sm">
                <i class="fa fa-dot-circle-o"></i> 提交
            </button>
            <button style="margin-left: 30px" type="reset" onclick="dialogClose()"  class="btn btn-danger btn-sm">
                <i class="fa fa-ban"></i> 关闭
            </button>
        </div>
    </div>
</script>
<script src="/static/plugins/jquery/jquery.min.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/plugins/layui/layui.all.js"></script>
<script src="/static/dist/js/adminlte.min.js"></script>
<script>
    function rowAdd() {
        layer.open({
            type: 1,
            title:false,
            area: ['600px', '300px'],
            shadeClose: true,
            content: $('#addDialog').html()
        });
    }
    function rowSub() {
        var table_name = $('#table_name').val();
        var families = $('#families').val();
        if(table_name === "") {
            layer.alert("表名不能为空");
            $('#table_name').focus();
            return;
        }
        if(families === "") {
            layer.alert("列簇不能为空");
            $('#families').focus();
            return;
        }
        $.ajax({
            url: '/table/ajax/add',
            //contentType: "application/json",
            type: 'POST',
            data: {name:table_name, families:families},
            dataType: 'json',
            success: function (data) {
                //console.log(data);
            }
        });
        layer.closeAll();
        layer.msg("操作成功");
    }
    function dialogClose() {
        layer.closeAll();
    }
    function rowDisable(name, status) {
        var enable = status? 0:1;
        layer.confirm('确定要操作么？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            $.ajax({
                url: '/table/ajax/update?name='+name+"&enable="+enable,
                type: 'GET',
                dataType: 'json',
                success: function (data) {

                }
            });
            layer.msg('操作成功', {icon: 1});
        }, function(){

        });
    }
    function rowDel(name) {
        layer.confirm('确定要删除么？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            $.ajax({
                url: '/table/ajax/del?name='+name,
                type: 'GET',
                dataType: 'json',
                success: function (data) {

                }
            });
            layer.msg('删除成功', {icon: 1});
        }, function(){

        });
    }
    function queryData() {
        $.ajax({
            url: '/table/ajax/list',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                var result = data.data;
                var html='';
                $.each(result, function (index, value) {
                    var trs = "";
                    var txt = value.is_table_enabled ? "禁用":"启用";
                    trs += "<tr id='data_"+value.name+"'><td>" + value.name + "</td> <td>" + value.families + "</td><td>"
                        + "<a href='Javascript:void(0)' onclick='rowDisable(\""+value.name+"\","+value.is_table_enabled+")' >"+txt+"</a>&nbsp;&nbsp;"
                        + "<a href='/record?tableName=" + value.name + "' target='_blank' >查看</a>&nbsp;&nbsp;"
                        + "<a href='Javascript:void(0)' onclick='rowDel(\""+value.name+"\")' >删除</a></td></tr>";
                    html += trs;
                });
                $('#dataList').html(html);

            }
        })

    }
    $(function () {
        queryData();

    });
</script>
</body>
</html>
